<template>

    <div>
        <!--头部内容-->
        <div class="relative">
            <!--Swiper-->
            <Swiper :items="items" :height="36 * store.rate + 'rem'"></Swiper>
            <!--Swiper里面登录-->
            <div class="absolute bottom-0 left-0 w-full flex py-2 bg-gray-900 opacity-40 z-20">
                <Container>
                    <div class="flex justify-between w-full">
                        <!--分类-->
                         <ul class="flex types text-white"  v-if="$route.name==='/study/card'">
                            <li class="active item">购物车</li>
                        </ul>
                        <ul class="flex types text-white" v-else>
                            <li class="active item">每日一课</li>
                            <li class="item">精品微课</li>
                            <li class="item">学习计划</li>
                            <li class="item">优质专栏</li>
                        </ul>
                       
                        <div class="flex items-center">
                        <!--搜索-->
                        <div class="relative bg-white rounded-6 pl-4 pr-2 h-full flex items-center mr-4">
                            <input type="text" placeholder="搜索课程" class="outline-none mr-2"/>
                           <i class=" i-ep:search "></i>
                        </div>
                        <!--登录-->
                        <div class= "text-gray-200 ">
                            <span class="mr-2 cursor-pointer  hover:text-white">登录</span>|
                            <span class="ml-2 cursor-pointer  hover:text-white">注册</span>
                        </div>
                        </div>
                    </div>
                </Container>
            </div>
        </div>
        <RouterView></RouterView>
    </div>

</template>

<script setup lang="ts">
import type { SwiperItemType } from '@/components/types';
import bg from '@/assets/images/bg.png'
import { useThemeStore } from '../stores/useThemeStore'
const store = useThemeStore()

const items: SwiperItemType[] = [
    {
        image: bg,
        title: '传播技术的种子',
        subTitle: '让技术没有门槛，让沟通没有障碍',
        url: 'https://www.baidu.com/'
    },
    {
        image: bg,
        title: '传播技术的种子',
        subTitle: '让技术没有门槛，让沟通没有障碍1',
        url: 'https://www.baidu.com/'
    },
    {
        image: bg,
        title: '传播技术的种子',
        subTitle: '让技术没有门槛，让沟通没有障碍2',
        url: 'https://www.baidu.com/'
    },
    {
        image: bg,
        title: '传播技术的种子',
        subTitle: '让技术没有门槛，让沟通没有障碍3',
        url: 'https://www.baidu.com/'
    }
]
</script>

<style scoped lang="scss">
.types {
    .item {
        @apply px-4 py-1 rounded-6 bg-gray-100 bg-opacity-20 mr-4 cursor-pointer;

        &:hover {
            @apply bg-white text-dark-300;

        }
    }

    .active {
        @apply bg-white text-dark-300;
    }
}

</style>